/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require style
 *= require_self
 *= require_tree ./admin
*/

header {
  margin: 0;
  background: #dddddd;
  div.top {
    padding: 10px;
    h1 {
      margin: 0;
      float: left;
      font-size: 1.6em;
    }
    ul.account_nav {
      float: right;
      li {
        float: left;
        list-style: none;
        margin-right: 10px;
      }
    }
  }
  ul.nav {
    li {
      float: left;
      list-style: none;
      margin-right: 20px;
      border: 1px solid #cccccc;
      border-bottom: none;
      background: #ffffff;

      a:link, a:visited {
        padding: 5px;
        display: block;
        text-decoration: none;
      }
      a:hover {
        background: #eeeeee;
      }
    }
    li.active {
      background: #eeeeee;
      border: 1px solid #cccccc;
      border-bottom: none;
    }
  }
}


/*
 * define table style
 */
@mixin table_style1 {
  thead {
    th {
      background: #dddddd;
      padding: 5px;
    }
  }
  tbody {
    tr.odd {
      background: #fee;
    }
    tr.even {
      background: #fff;
    }
    td {
      text-align: center;
      padding: 5px;
    }
  }
}

form.form_style1 {
  div.field_groups {
    margin: 10px 0;
    div.input {
      margin: 3px;
      label {
        text-align: right;
        line-height: 24px;
        width: 140px;
        float: left;
        padding-right: 10px;
      }
      input {
        line-height: 22px;
        border: 1px solid #999;
        float: left;
      }
    }
  }

  div.buttons {
    margin: 15px;
    margin-left: 160px;
  }
}

div#main {
  padding: 10px;
  div.toolbox {
    padding: 10px 0;

    ul.filter {
      li {
        float: left;
        list-style: none;
        margin-right: 15px;
      }
    }
  }
}



table.channels {
  @include table_style1;
  th, td {
    padding: 5px;
    &.name {
      width: 120px;
    }
    &.desc {
      width: 160px;
    }
    &.timetable {
      width: 160px;
    }
    &.actions {
      width: 120px;
    }
  }
}


table.programs {
  @include table_style1;
  th, td {
    padding: 5px;
    &.channel {
      width: 80px;
    }
    &.day_of_week {
      width: 80px;
    }
    &.time {
      width: 120px;
    }
    &.title {
      width: 120px;
    }
    &.pd_name {
      width: 100px;
    }
    &.operator_name {
      width: 100px;
    }
    &.logo_position {
      width: 80px;
    }
    &.logo_url {
      width: 100px;
    }
    &.background_url {
      width: 100px;
    }
    &.actions {
      width: 120px;
    }
  }
}

table.banners {
  @include table_style1;
  th, td {
    &.name {
      width: 120px;
    }
    &.desc {
      width: 160px;
    }
    &.image_url {
      width: 200px;
    }
    &.landing_url {
      width: 200px;
    }
    &.actions {
      width: 120px;
    }
  }
}

